<template>
	<view id="tmpl">
		<view class="line-image">
			<textarea name="remarks" v-model="content"></textarea>
		</view>
		<view class="line-image">
			<view>
				<view class="grid col-4 grid-square flex-sub">
					<view class="bg-img" v-for="(item,index) in pictures" :key="index" @tap="ViewImage" :data-url="pictures[index]">
						<image :src="pictures[index]" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
							<text class='cuIcon-close'></text>
						</view>
					</view>
					<view class="solids" @tap="uploadPic()" v-if="pictures.length<6">
						<text class='cuIcon-cameraadd'></text>
					</view>
				</view>
			</view>
		</view>
		<view class='tip'>
			您已连续 3 月上传心得
		</view>
		<view class='tip'>
			(连续多月上传心得可获得奖励)
		</view>

		<view class="line-button" @click="submit">
			<text>上传心得</text>
		</view>
	</view>
</template>

<script>
	import vvSelect from '../../components/vv-select/vv-select.vue'
	import config from '../../static/common/config.js'

	export default {
		components: {
			vvSelect
		},
		data() {
			return {
				p: 0,
				id: 0,
				title: '',
				pictures: [],
				url_pictures: [],
				username: '',
				content : ''
			}
		},
		methods: {
			DelImg(e) {
				let _this = this
				uni.showModal({
					title: '确定删除',
					content: '确定要删除这张图片吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							_this.pictures.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			ViewImage(e) {
				let _this = this
				uni.previewImage({
					urls: _this.pictures,
					current: e.currentTarget.dataset.url
				});
			},
			onLoad: function(options) {
				let self = this;
				this.id = options.id
				uni.setNavigationBarTitle({
					title: options.title
				})
			},
			onShow: function() {
				let is_login = uni.getStorageSync('user_token') ? true : false;
				
				if(!is_login){
					uni.navigateTo({
						url:'../profile/user_login'
					})
				}
			},
			uploadPic() {
				let _this = this;
				if (_this.pictures >= 6) {
					uni.showToast({
						title: '最多上传6张图片'
					})
					return false;
				}
				uni.chooseImage({
					count: 1,
					sizeType: ['copressed'],
					success(res) {
						var imgFiles = res.tempFilePaths[0]
						console.log(imgFiles)
						let token = uni.getStorageSync("user_token");
						let header = {
							"Authorization": token,
							"Accept": "application/json,text/plain,*/*"
						};
						var uper = uni.uploadFile({
							url: config + '/common/upload',
							header: header,
							filePath: imgFiles,
							name: 'file',
							success(res) {
								let json = JSON.parse(res.data);
								let url = 'https://jsy.ihltec.com/prod-api' + json.fileName;
								_this.pictures = _this.pictures.concat(url)
								console.log(_this.pictures)
							}
						});
					}
				})
			},
			submit: function() {
				let self = this;
				if (self.pictures == "") {
					uni.showToast({
						title: "请上传图片"
					})
					return false;
				}
				let user = uni.getStorageSync('user');
				this.$api.upload_px_xinde({
					"image1Path": self.pictures[0],
					"image2Path": self.pictures[1],
					"image3Path": self.pictures[2],
					"image4Path": self.pictures[3],
					"image5Path": self.pictures[4],
					"image6Path": self.pictures[5],
					"pxId": self.id,
					'remarks':self.content,
					"username": user.userName,
				}).then(res => {
					let code = res.statusCode;
					if (code == 200) {
						uni.showToast({
							title: '提交成功',
							duration: 2000
						})
						setTimeout(()=> {
								uni.switchTab({
									url:'../home/index'
								})
							}, 2000)
					} else {
						uni.showToast({
							title: '提交失败',
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #fff;
	}
	.line-text,
	.line-textarea,
	.line-image {
		margin: 20upx;
		@extend .flex-between;
		border-bottom: solid 1px #f0f0f0;
		padding: 0 10upx;
	}

	.line-textarea,
	.line-image {
		display: block;

		text:first-child {}
	}

	.line-textarea {
		textarea {
			margin-top: 10upx;
			padding: 0;
			// width: calc(100% - 20upx);
			font-size: $uni-font-size-base;
			width: 100%;
			color: $font-color-4;
			// color:red;
			// border: solid 1px black !important;
		}
	}

	.line-text {
		height: 68upx;
		line-height: 68upx;
	}

	.line-image {
		padding: 15upx 0;

		image {
			margin-top: 10upx;
			margin-left: 10upx;
			width: 160upx;
			height: 160upx;
		}
	}

	.line-button {
		@extend .line-button;
		margin-top: 20px;
	}

	.pictures-list {
		@extend .flex-between;
		justify-content: flex-start;
		flex-wrap: wrap;
		padding: 20upx;

		.picture-item {
			margin-left: 10upx;

			image {
				width: 20vw;
				height: 20vw !important;
			}
		}
	}

	.tip {
		margin-top: 5upx;
		text-align: center;
		font-size: $uni-font-size-sm;
		color: #626262;
	}
	textarea {
		margin-top: 10upx;
		padding: 0;
		width: calc(100% - 40upx);
		font-size: $uni-font-size-base;
		color: $font-color-4;
		border: solid 1px rgba(0, 0, 0, .3) !important;
		padding: 20upx;
	}
</style>
